<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'
import PageContainer from '@/components/page-container/index.vue'
import { SYSTEM_CONFIG, FILE_URL } from '@/api/config.js'

const items = reactive({
  about_us: '',
})

onMounted(() => {
  const systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
  if (systemConfig) {
    items.about_us = systemConfig.basic.about_us
  }
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      bg-color="transparent"
      fixed
      :bottom-shadow="false"
      :placeholder="false"
    />
    <view class="about-page">
      <view
        class="about-image"
        :style="{
          backgroundImage: 'url(' + FILE_URL + items.about_us + ')',
        }"
      />
      /* #ifdef MP-WEIXIN */
      <TnSuspendButton bg-color="tn-gradient__orange">
        <TnButton only-button open-type="contact">
          <TnIcon name="wechat-fill" color="#fff" size="70" />
        </TnButton>
      </TnSuspendButton>
      /* #endif */
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.about-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(-120deg, #f15bb5, #9a5ce5, #01beff, #00f5d4);
  background-size: 500% 500%;
  animation: gradientBGAnimation 15s linear infinite;

  .about-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

@keyframes gradientBGAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>
